class Index {
    constructor() {
        this.bingEve();
        this.cycle();
        this.date();
        this.loginStatus()
    }
    //绑定事件
    bingEve() {
        this.$('.grid-col2-t').addEventListener('click', this.arrow.bind(this))
    }
    // 记录下标
    // index = '';
    // 绑定点击事件
    arrow(eve) {
        let tar = eve.target
        // 左右箭头
        if (tar.classList.contains('arrow-l')) {
            this.arrowl()
        }
        if (tar.classList.contains('arrow-r')) {
            this.arrowr()
        }
    }
    // 左右箭头
    // 左箭头
    arrowl() {
        let index = '';
        // 找到当前节点是第几个
        this.$('.t-img li').forEach((ele, dex) => {
            if (ele.classList.contains('ac')) {
                index = dex;
                // console.log(index);
            }
        });
        index--
        if (index < 0) index = 3
        // console.log(index);
        // 图片切换
        this.selectImg(index)

    }
    // 右箭头
    arrowr() {
        let index = '';
        this.$('.t-img li').forEach((ele, dex) => {
            if (ele.classList.contains('ac')) {
                index = dex;
                console.log(index);
            }
        });
        index++
        if (index > 3) index = 0
        // console.log(index);
        // 图片切换
        this.selectImg(index)
    }
    times = ''
    // 循环播放
    cycle() {
        // let that = this;
        this.times = setInterval(() => {
            this.arrowl()
        }, 3000)
        // 鼠标移入停止播放,鼠标移出则继续
        this.$('.grid-col2-t').onmouseover = () => {
            clearInterval(this.times);
        }
        this.$('.grid-col2-t').onmouseout = () => {
            this.cycle()
        }
    }
    // 实现图片的切换
    selectImg(index) {
        // 取消原来有ac类的图片
        this.$('ul .ac').className = '';
        // 设置最新出来的图片有ac类
        this.$('.t-img li')[index].className = 'ac';
    }
    // 倒计时
    date() {
        let times = '';
        times = setInterval(() => {
            let date = new Date()
            // console.log(date);
            //获取小时 设置给strong标签
            let hour = date.getHours()
            // console.log(hour);
            if (hour % 2 != 0) {
                hour = hour - 1;
            }
            this.$('.hd_countdown strong').innerHTML = hour + ":00"
            // 当前时间的时间戳
            let curTime = date.getTime();
            // console.log(curTime);

            let date1 = new Date();
            let h = date1.setHours(hour + 2);
            let m = date1.setMinutes(0);
            let s = date1.setSeconds(0);
            // console.log(date1);
            // 获取结束时间的时间戳
            let time = date1.getTime();
            // console.log(time);
            let num = time - curTime
            // console.log(num);
            // 换成秒
            let second = parseInt(num / 1000 % 60);
            if (second < 10) second = "0" + second;
            // 换成分钟
            let minute = parseInt((num / 1000 / 60) % 60);
            if (minute < 10) minute = "0" + minute;
            //换成小时
            let hours = parseInt((num / 1000 / 60 / 60));
            // console.log(second, minute, hours);
            // 设置到页面中
            this.$('.timer .hour').innerHTML = "0" + hours;
            this.$('.timer .minute').innerHTML = minute;
            this.$('.timer .second').innerHTML = second;
        }, 1000)

        // 延时器 让倒计时显示
        setTimeout(() => {
            this.$('.countdown-hd').style.opacity = 1
        }, 1000)
    }
    // 判断登录状态 设置用户名
    loginStatus() {
        let status = localStorage.getItem('id')
        let username = localStorage.getItem('uname')
        console.log(this.$('.fr li a')[0]);
        if (status) {
            this.$('.f10').forEach(ele => {
                this.$('.fr li a')[0].innerHTML = username
            })
        }
    }
    // 封装获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}
new Index;